<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*" %> <!-- 导入SQL相关类 -->
<%@ page import="java.math.BigDecimal" %> <!-- 导入BigDecimal类，用于处理货币 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <title>云城游戏门户</title> <!-- 页面标题 -->
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0; /* 清除默认边距 */
            padding: 0; /* 清除默认内边距 */
            box-sizing: border-box; /* 设置盒模型为border-box */
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif; /* 设置字体 */
            background-color: #f4f4f4; /* 设置背景颜色 */
            line-height: 1.6; /* 设置行高 */
        }

        /* 头部样式 */
        .header {
            background-color: #fff; /* 头部背景颜色 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加阴影效果 */
            padding: 15px 50px; /* 设置内边距 */
            position: fixed; /* 固定头部 */
            width: 100%; /* 头部宽度100% */
            top: 0; /* 顶部对齐 */
            z-index: 1000; /* 设置层级 */
        }

        .header-content {
            display: flex; /* 使用flex布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center; /* 垂直居中 */
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 水平居中 */
        }

        .logo {
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            gap: 10px; /* 设置间距 */
            text-decoration: none; /* 去掉下划线 */
            color: #333; /* 字体颜色 */
        }

        .logo span {
            font-size: 24px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
        }

        .nav-links {
            display: flex; /* 使用flex布局 */
            gap: 30px; /* 设置间距 */
        }

        .nav-links a {
            text-decoration: none; /* 去掉下划线 */
            color: #333; /* 字体颜色 */
            font-size: 16px; /* 字体大小 */
            transition: color 0.3s; /* 添加过渡效果 */
        }

        .nav-links a:hover {
            color: #007bff; /* 悬停时字体颜色 */
        }

        .auth-buttons {
            display: flex; /* 使用flex布局 */
            gap: 15px; /* 设置间距 */
        }

        .auth-buttons a {
            text-decoration: none; /* 去掉下划线 */
            padding: 8px 20px; /* 设置内边距 */
            border-radius: 4px; /* 设置圆角 */
            transition: all 0.3s; /* 添加过渡效果 */
        }

        .login-btn {
            color: #007bff; /* 登录按钮字体颜色 */
            border: 1px solid #007bff; /* 登录按钮边框 */
        }

        .login-btn:hover {
            background-color: #007bff; /* 悬停时背景颜色 */
            color: #fff; /* 悬停时字体颜色 */
        }

        .register-btn {
            background-color: #007bff; /* 注册按钮背景颜色 */
            color: #fff; /* 注册按钮字体颜色 */
            border: 1px solid #007bff; /* 注册按钮边框 */
        }

        .register-btn:hover {
            background-color: #0056b3; /* 悬停时背景颜色 */
            border-color: #0056b3; /* 悬停时边框颜色 */
        }

        /* 主要内容区域 */
        .main-content {
            margin-top: 0px; /* 设置顶部外边距 */
            padding: 20px; /* 设置内边距 */
            max-width: 1200px; /* 最大宽度 */
            margin-left: auto; /* 左右居中 */
            margin-right: auto; /* 左右居中 */
        }

        /* 游戏展示区域 */
        .game-grid {
            display: grid; /* 使用网格布局 */
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 设置列的数量和宽度 */
            gap: 20px; /* 设置间距 */
            padding: 20px 0; /* 设置上下内边距 */
        }

        .game-card {
            background: #fff; /* 游戏卡片背景颜色 */
            border-radius: 8px; /* 设置圆角 */
            overflow: hidden; /* 隐藏溢出内容 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加阴影效果 */
            transition: transform 0.3s; /* 添加过渡效果 */
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直排列 */
            height: 500px; /* 设置高度 */
        }

        .game-card:hover {
            transform: translateY(-5px); /* 悬停时向上移动 */
        }

        .game-image {
            width: 100%; /* 图片宽度100% */
            height: 200px; /* 设置高度 */
            object-fit: cover; /* 保持比例填充 */
        }

        .game-info {
            padding: 15px; /* 设置内边距 */
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直排列 */
            flex: 1; /* 填充剩余空间 */
            position: relative; /* 相对定位 */
        }

        .game-title {
            font-size: 18px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            margin-bottom: 10px; /* 下边距 */
        }

        .game-description {
            color: #666; /* 字体颜色 */
            font-size: 14px; /* 字体大小 */
            margin-bottom: 15px; /* 下边距 */
            overflow: hidden; /* 隐藏溢出内容 */
            display: -webkit-box; /* 使用盒子模型 */
            -webkit-line-clamp: 2; /* 限制行数 */
            -webkit-box-orient: vertical; /* 垂直排列 */
            flex: 1; /* 填充剩余空间 */
        }

        .game-button {
            display: inline-block; /* 行内块元素 */
            padding: 8px 15px; /* 设置内边距 */
            background-color: #007bff; /* 背景颜色 */
            color: #fff; /* 字体颜色 */
            text-decoration: none; /* 去掉下划线 */
            border-radius: 4px; /* 设置圆角 */
            transition: background-color 0.3s; /* 添加过渡效果 */
            text-align: center; /* 文本居中 */
            position: absolute; /* 绝对定位 */
            bottom: 15px; /* 底部对齐 */
            left: 15px; /* 左侧对齐 */
            right: 15px; /* 右侧对齐 */
        }

        .game-button:hover {
            background-color: #0056b3; /* 悬停时背景颜色 */
        }

        /* 页脚样式 */
        .footer {
            background-color: #333; /* 页脚背景颜色 */
            color: #fff; /* 字体颜色 */
            padding: 30px 0; /* 设置上下内边距 */
            margin-top: 50px; /* 设置顶部外边距 */
        }

        .footer-content {
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 水平居中 */
            text-align: center; /* 文本居中 */
        }

        /* 添加轮播图样式 */
        .carousel {
            width: 100%; /* 宽度100% */
            max-height: 600px; /* 设置最大高度 */
            overflow: hidden; /* 隐藏溢出内容 */
        }

        .carousel-inner {
            width: 100%; /* 宽度100% */
            height: 100%; /* 高度100% */
        }

        .carousel-item {
            width: 100%; /* 宽度100% */
            height: 600px; /* 固定高度 */
        }

        .carousel-item img {
            width: 100%; /* 宽度100% */
            height: 100%; /* 高度100% */
            object-fit: cover; /* 保持比例填充 */
            object-position: center; /* 居中显示 */
        }

        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            z-index: 1000; /* 设置层级 */
            left: 0; /* 左侧对齐 */
            top: 0; /* 顶部对齐 */
            width: 100%; /* 宽度100% */
            height: 100%; /* 高度100% */
            overflow: auto; /* 允许滚动 */
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
        }

        .modal-content {
            background-color: #fff; /* 模态框背景颜色 */
            margin: 15% auto; /* 在页面中居中 */
            padding: 20px; /* 设置内边距 */
            border: 1px solid #888; /* 边框 */
            width: 40%; /* 宽度 */
        }

        .close {
            color: #aaa; /* 关闭按钮颜色 */
            float: right; /* 右侧对齐 */
            font-size: 28px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
        }

        .close:hover,
        .close:focus {
            color: black; /* 悬停或聚焦时颜色 */
            text-decoration: none; /* 去掉下划线 */
            cursor: pointer; /* 鼠标指针样式 */
        }

        .game-price {
            font-size: 20px; /* 字体大小 */
            color: #ff4d4f; /* 字体颜色 */
            font-weight: bold; /* 字体加粗 */
            margin: 15px 0; /* 上下边距 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            background: rgba(255, 77, 79, 0.1); /* 背景颜色 */
            padding: 8px 12px; /* 设置内边距 */
            border-radius: 6px; /* 设置圆角 */
            position: relative; /* 相对定位 */
            overflow: hidden; /* 隐藏溢出内容 */
            margin-bottom: 60px; /* 下边距 */
        }

        .game-price::before {
            content: '￥'; /* 价格前缀 */
            font-size: 16px; /* 字体大小 */
            margin-right: 2px; /* 右边距 */
            color: #ff4d4f; /* 字体颜色 */
        }

        .game-price::after {
            content: ''; /* 伪元素 */
            position: absolute; /* 绝对定位 */
            top: 0; /* 顶部对齐 */
            left: 0; /* 左侧对齐 */
            right: 0; /* 右侧对齐 */
            bottom: 0; /* 底部对齐 */
            background: linear-gradient(45deg, rgba(255, 77, 79, 0.05), rgba(255, 77, 79, 0.1)); /* 渐变背景 */
            z-index: -1; /* 设置层级 */
        }
    </style>
</head>
<body>
<!-- 头部导航 -->
<header class="header">
    <div class="header-content">
        <a href="index.jsp" class="logo">
            <span>🎮 云城游戏</span> <!-- 网站名称 -->
        </a>
        <nav class="nav-links">
            <a href="index.jsp">游戏中心</a> <!-- 游戏中心链接 -->
            <a href="gouwuche.jsp">我的购物车</a> <!-- 我的购物车 -->
            <a href="#" id="logQueryBtn" class="nav-links">日志查询</a> <!-- 日志查询按钮 -->
            <a href="dingdan.jsp">我的订单</a> <!-- 我的订单链接 -->
        </nav>
        <div class="auth-buttons">
            <a href="login.jsp" class="login-btn">登录</a> <!-- 登录按钮 -->
            <a href="register.jsp" class="register-btn">注册</a> <!-- 注册按钮 -->
        </div>
    </div>
</header>

<!-- 轮播图 -->
<div id="imageCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000" style="margin-top: 50px;">
    <!-- 指示器 -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="2"></button>
    </div>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://img.mcfengqi.icu/LightPicture/2024/12/989d786430a14afa.jpg" class="d-block w-100" alt="游戏图片1"> <!-- 第一张图片 -->
        </div>
        <div class="carousel-item">
            <img src="https://img.mcfengqi.icu/LightPicture/2024/12/ad81b155043e66ad.jpg" class="d-block w-100" alt="游戏图片2"> <!-- 第二张图片 -->
        </div>
        <div class="carousel-item">
            <img src="https://img.mcfengqi.icu/LightPicture/2024/12/d3b164437abf8e16.jpg" class="d-block w-100" alt="游戏图片3"> <!-- 第三张图片 -->
        </div>
    </div>

    <!-- 控制按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span> <!-- 上一张按钮 -->
        <span class="visually-hidden">Previous</span> <!-- 可访问性文本 -->
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span> <!-- 下一张按钮 -->
        <span class="visually-hidden">Next</span> <!-- 可访问性文本 -->
    </button>
</div>

<!-- 主要内容区域 -->
<main class="main-content">
    <div class="game-grid">
        <%
            // 修改数据库连接信息
            String DB_URL = "jdbc:mysql://localhost:3306/game"; // 数据库URL
            String USER = "root";     // 修改用户名
            String PASS = "1234";   // 修改密码

            try {
                Class.forName("com.mysql.cj.jdbc.Driver"); // 加载MySQL驱动
                Connection conn = DriverManager.getConnection(DB_URL, USER, PASS); // 建立数据库连接

                // 查询游戏列表
                String sql = "SELECT * FROM gamelist ORDER BY created_at DESC"; // SQL查询语句
                PreparedStatement stmt = conn.prepareStatement(sql); // 准备SQL语句
                ResultSet rs = stmt.executeQuery(); // 执行查询

                // 遍历结果集并显示游戏卡片
                while(rs.next()) {
                    int gameId = rs.getInt("gameid"); // 获取游戏ID
                    String gameImg = rs.getString("gameimg"); // 获取游戏图片
                    String gameName = rs.getString("gamename"); // 获取游戏名称
                    String gameDesc = rs.getString("gametxt"); // 获取游戏描述
                    String gameLink = rs.getString("gamelink"); // 获取游戏链接
                    BigDecimal gameMoney=rs.getBigDecimal("gamemoney"); // 获取游戏价格
        %>
        <div class="game-card">
            <img src="<%= gameImg %>" alt="<%= gameName %>" class="game-image"
                 onerror="this.src='images/default-game.png'"> <!-- 图片加载失败时显示默认图片 -->
            <div class="game-info">
                <h3 class="game-title"><%= gameName %></h3> <!-- 游戏名称 -->
                <p class="game-description"><%= gameDesc %></p> <!-- 游戏描述 -->
                <div class="game-price">价格：<%= gameMoney %></div> <!-- 游戏价格 -->
                <a href="xiangqing.jsp?gameName=<%= gameName %>&gameDesc=<%= gameDesc %>&gameMoney=<%= gameMoney %>&gameImg=<%= gameImg %>&gameId=<%= gameId %>" class="game-button">点击查看详情</a> <!-- 游戏详情链接 -->
            </div>
        </div>
        <%
                }
                // 关闭数据库连接
                rs.close(); // 关闭结果集
                stmt.close(); // 关闭语句
                conn.close(); // 关闭连接
            } catch(Exception e) {
                e.printStackTrace(); // 打印异常信息
                out.println("获取游戏列表失败请检查网络或数据库" + e.getMessage()); // 输出错误信息
            }
        %>
    </div>
</main>
<div id="cart" class="cart">
    <button onclick="showCart()">🛒 购物车 (<span id="cartCount">0</span>)</button>
    <div id="cartItems" class="cart-items" style="display: none;">
        <h4>购物车</h4>
        <ul id="cartList"></ul>
        <button onclick="checkout()">结账</button>
    </div>
</div>

<script src="cart.js"></script> <!-- 引入购物车脚本 -->
<!-- 页脚 -->
<footer class="footer">
    <div class="footer-content">
        <p>© 2024 云城游戏门户. All rights reserved.</p> <!-- 页脚版权信息 -->
        <p>
            <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #fff; text-decoration: none;">
                陕ICP备2024054614号
            </a>
            &nbsp;|&nbsp;
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank" style="color: #fff; text-decoration: none;">
                <img src="https://img.mcfengqi.icu/LightPicture/2024/11/75fb7a50447cf897.png" alt="公安备案图标" style="vertical-align: middle; margin-right: 3px;">
                陕公网安备61019102000653
            </a>
        </p>
    </div>
</footer>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 初始化轮播图
    document.addEventListener('DOMContentLoaded', function() {
        var myCarousel = document.getElementById('imageCarousel'); // 获取轮播图元素
        var carousel = new bootstrap.Carousel(myCarousel, {
            interval: 2000, // 设置自动播放间隔
            ride: true // 启动自动播放
        });
        // 强制开始自动播放
        carousel.cycle(); // 开始循环播放
    });
</script>
<script>
    // 获取模态框
    var modal = document.getElementById("logModal"); // 获取日志模态框

    // 获取按钮
    var btn = document.getElementById("logQueryBtn"); // 获取日志查询按钮

    // 获取关闭按钮
    var span = document.getElementsByClassName("close")[0]; // 获取关闭按钮

    // 当用户点击按钮时，打开模态框
    btn.onclick = function() {
        modal.style.display = "block"; // 显示模态框
        loadLogs(); // 加载日志内容
    }

    // 当用户点击关闭按钮时，关闭模态框
    span.onclick = function() {
        modal.style.display = "none"; // 隐藏模态框
    }

    // 当用户点击模态框外部时，关闭模态框
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none"; // 隐藏模态框
        }
    }

    // 加载日志内容的函数
    function loadLogs() {
        // 使用 AJAX 请求获取日志内容
        var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
        xhr.open("GET", "getLogs.jsp", true); // 假设你有一个 getLogs.jsp 文件来处理日志查询
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("logContent").innerHTML = xhr.responseText; // 更新日志内容
            }
        };
        xhr.send(); // 发送请求
    }
</script>
</body>
</html>
